<template>
	<view>
		<mescroll-body ref="mescroll" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<block v-for="(item, index) in waybillist" :key="index">
				<view class="column-css view-cente" @click="onDetail(item)">
					<view class="row-css" style="justify-content: space-between;padding: 20rpx 0; border-bottom: 1rpx dashed #EEEEEE;">
						<view>车辆：{{ item.vehicleNo }}</view>
						<view :style="{'color' : item.billStatus == 6 ? '#999' :'#81D588'}" v-text="item.billStatus == 6 ? '已取消' :'已完成'"></view>
					</view>
					<view class="column-css" style="padding: 30rpx 0;">
						<view class="row-css" style="align-items: center;">
							<view class="view-rodio" style="background: #81D588;"></view>
							{{ item.shippingCity }}
						</view>
						<view class="line"></view>
						<view class="row-css" style="align-items: center;">
							<view class="view-rodio" style="background: #FB8536;"></view>
							{{ item.receiptCity }}
						</view>
					</view>
					<view style="padding-top: 10rpx;padding-bottom: 30rpx;">{{ item.crtTime }} ~ {{ item.arriveTime }}</view>
				</view>
				<view style="width: 100%;height: 20rpx;background: #F8F8F8;"></view>
			</block>
		</mescroll-body>
	</view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import MescrollBody from '@/uni_modules/mescroll-uni/components/mescroll-body/mescroll-body.vue';
export default {
	mixins: [MescrollMixin], // 使用mixin
	components: {
		MescrollBody
	},
	data() {
		return {
			waybillist: [],
			page: 1,
			pageSize: 10,
			mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
			// 下拉刷新的配置(可选, 绝大部分情况无需配置)
			downOption: {},
			// 上拉加载的配置(可选, 绝大部分情况无需配置)
			upOption: {
				page: {
					num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					size: 10 // 每页数据的数量,默认10
				},
				noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
				empty: {
					tip: '暂无相关数据'
				}
			}
		};
	},
	methods: {
		mescrollInit(mescroll) {
			this.mescroll = mescroll;
		},
		/*下拉刷新的回调*/
		downCallback(mescroll) {
			mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
		},
		/*上拉加载的回调*/
		upCallback(mescroll) {
			this.page = mescroll.num; // 页码, 默认从1开始
			//联网加载数据
			this.onwaybill(mescroll);
		},
		onDetail: function(item) {
			uni.navigateTo({
				url: '../task/taskdetail?data=' + JSON.stringify(item)
			});
		},
		onwaybill(mescroll) {
			this.wxRequest({
				url: `${this.API}/miniApp/loadingOrder/driverLoadingOrderPage`,
				method: 'POST',
				data: {
					pageNo: this.page,
					pageSize: this.pageSize,
					queryType: 2,
				},
				title: '加载中...',
				success: res => {
					let list = res.data.data.list;
					if (this.page == 1) {
						this.waybillist = [];
					}
					for (let i = 0; i < list.length; i++) {
						this.waybillist.push(list[i]);
					}
					if (mescroll != null) {
						mescroll.endBySize(this.waybillist.length, res.data.data.total);
						setTimeout(() => {
							this.mescroll.endSuccess(this.waybillist.length);
						}, 20);
					}
				}
			});
		}
	},
	onLoad() {
		this.onwaybill(null);
	}
};
</script>

<style>
.row-css {
	display: flex;
	flex-direction: row;
}

.column-css {
	display: flex;
	flex-direction: column;
}

.view-cente {
	background: #ffffff;
	padding: 0 30rpx;
}

.line {
	background-color: #d9d9d9;
	margin-left: 14rpx;
	height: 50rpx;
	width: 1rpx;
}

.view-rodio {
	display: flex;
	width: 15rpx;
	height: 15rpx;
	margin: 7.5rpx;
	border-radius: 50%;
}
</style>
